import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
import { nanoid } from '@reduxjs/toolkit'
import { Button, Checkbox, Form, Input, Space } from 'antd'
import React from 'react'
import { QuestionCheckboxPropsType, OptionType } from './interface'
const PropComponent: React.FC<QuestionCheckboxPropsType> = ({
  title,
  isVertical,
  list = [],
  onChange,
  disabled,
}) => {
  const [form] = Form.useForm()

  function handleValuesChange() {
    if (onChange) {
      const newValues = form.getFieldsValue() as QuestionCheckboxPropsType
      if (newValues.list) {
        newValues.list = newValues.list.filter(opt => !(opt.text == null))
      }
      const { list = [] } = newValues
      list.forEach(opt => {
        if (!opt.value) {
          opt.value = nanoid(5)
        }
      })
      onChange(newValues)
    }
  }

  return (
    <Form
      layout="vertical"
      form={form}
      disabled={disabled}
      initialValues={{ title, isVertical, list }}
      onFieldsChange={handleValuesChange}
    >
      <Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入标题' }]}>
        <Input />
      </Form.Item>
      <Form.Item label="选项">
        <Form.List name="list">
          {(fields, { add, remove }) => (
            <>
              {/* 遍历所有选项, 可删除 */}
              {fields.map(({ key, name }, index) => {
                return (
                  <Space key={key} align="baseline">
                    {/* 当前选项 是否选中 */}
                    <Form.Item name={[name, 'checked']} valuePropName="checked">
                      <Checkbox></Checkbox>
                    </Form.Item>
                    {/* 当前选项 输入框 */}
                    <Form.Item
                      name={[name, 'text']}
                      rules={[
                        { required: true, message: '请输入选项文字' },
                        {
                          validator: (_, text) => {
                            const { list = [] } = form.getFieldsValue()
                            let num = 0
                            list.forEach((opt: OptionType) => {
                              // 记录 text 相同的个数, 预期只有一个
                              if (opt.text === text) {
                                num++
                              }
                            })
                            if (num === 1) {
                              return Promise.resolve()
                            }
                            return Promise.reject(new Error('和其他选项重复了'))
                          },
                        },
                      ]}
                    >
                      <Input placeholder="请输入选项文字" />
                    </Form.Item>
                    {index > 0 && (
                      <MinusCircleOutlined
                        onClick={() => {
                          remove(name)
                        }}
                      />
                    )}
                  </Space>
                )
              })}

              {/* 添加选项 */}
              <Form.Item>
                <Button
                  type="link"
                  onClick={() => {
                    add({ text: '', value: '', checked: false })
                  }}
                  icon={<PlusOutlined />}
                >
                  添加选项
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form.Item>
      <Form.Item name="isVertical" valuePropName="checked">
        <Checkbox>竖向排列</Checkbox>
      </Form.Item>
    </Form>
  )
}
export default PropComponent
